White Labeling UI of Token Invitation Wizard
You can customize (white label) the following UI elements in the token invitation wizard, which is used for app registration during customer onboarding:
| ■ | Use App Registration Tab "here" Link |
| ■ | Use Device Token Tab "here" Link |
| ■ | Product Logo |
| ■ | Color Theme |
The parameters for customizing the above are located in the SQL database table [SysAdminTenant].[dbo].[ApplicationSetting]:
Service Provider's Logo
The WhiteLabelCustomerAuthentication parameter replaces the default corporate logo of the customer. Before you can change the logo, save the image file in the folder ...\acs\SysAdmin.CustomerAuthentication\wwwroot\img.
The logo image file must be in SVG (.svg) format.
Use App Registration Tab "here" Link
The WhiteLabelAppRegistrationDocumentation parameter defines the URL to the documentation for the "here" link that's displayed for the Use App Registration tab:
Use Device Token Tab "here" Link
The WhiteLabelDeviceTokenDocumentation parameter defines the URL to the documentation for the "here" link that's displayed for the Use Device Token tab:
Product Logo
The WhiteLabelCustomerAuthenticationLogoFile parameter overrides the default logo (logo.svg) that's displayed on the page. The parameter value specifies the path (absolute) to the logo file.
| ● | The logo file must be in SVG (.svg) format. |
| ● | The path to the file must be an absolute path. |
Color Theme
The WhiteLabelCustomerAuthenticationThemeFile parameter overrides the gradient of the primary color used in the UI, which affects various elements (e.g., button and text). The parameter value species the path (absolute) to the .css file.
The path to the file must be an absolute path.
The following shows the default CSS (theme.css):
:root {
--primary-color-0 #000000;/* Black */
--primary-color-10 #001A33;
--primary-color-20 #003966;
--primary-color-25 #004A8C;
--primary-color-30 #00539E;
--primary-color-35 #0057A7;
--primary-color-40 #005DB1;
--primary-color-50 #0084BC;
--primary-color-60 #00AAC6;
--primary-color-70 #33B8D1;
--primary-color-80 #66C7DC;
--primary-color-90 #99D5E6;
--primary-color-95 #CCE2F0;
--primary-color-98 #E6F0F5;
--primary-color-99 #F5F8FA;
--primary-color-100 #FFFFFF;/* White */
}